<template>
    <div class="login">
        <van-form class="form" @submit="login">
                <div class="avatar">
                    <img src="/assets/images/avatar.jpg" />
                </div>

                <van-field 
                    v-model="business.mobile"
                    name="mobile"
                    placeholder="手机号码"
                    left-icon="phone-o"
                    required
                    :rules="[
                        { required: true, message: '请填写手机号码' },
                        {pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确'}
                    ]"
                />

                <van-field 
                    v-model="business.password"
                    type="password"
                    name="password"
                    placeholder="密码"
                    left-icon="warn-o"
                    required
                    :rules="[{ required: true, message: '请填写密码' }]"
                />

                <div class="button">
                    <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">
                        登 录 / 注 册
                    </van-button>
                </div>
                    
                <div class="forget">
                    <router-link to="/">返回首页</router-link>
                </div>
        </van-form>
    </div>
</template>

<script setup>
    //获取类似于vue2的this对象
    // proxy == this
    const {proxy} = getCurrentInstance()

    //创建数据
    let business = ref({
        mobile: '18888888889',
        password: '123456'
    })

    const login = async (values) => 
    {
        let token = proxy.$route.query.token
        if(token){
            values.token = token
        }
        let result = await proxy.$POST({
            url:'business/login',
            data:values
        })
        //登录成功提醒并跳转
        if(result.code==1){
            proxy.$business.value = result.data.business;
            localStorage.setItem('token',result.data.token)
            showSuccessToast({
                message: result.msg,
                duration: 1000,
                onClose: () => {
                    let query = proxy.$route.query
                    if(query.path&&query.query){
                        proxy.$router.push({path:proxy.$route.query.path,query:JSON.parse(proxy.$route.query.query)})
                    }else if(query.path&&!query.query){
                        proxy.$router.push({path:proxy.$route.query.path})
                    }else{
                        proxy.$router.push('/business')
                    }
                }
            })
        }else{
            showFailToast({
                message: result.msg,
                duration: 1000,
            })
        }
        
    }



</script>


<style scoped>
@import url('/assets/css/login.css');
</style>